<template>
    <div class="app-container">

        <div class="filter-container clearfix">
            <router-link to="/setting/site/add" v-if="roles == 'root'">
                <el-button type="primary">+添加站点</el-button>
            </router-link>
        </div>
        <el-table class="table-compact" :data="list" v-loading.body="listLoading"
                  element-loading-text="拼命加载中" stripe fit
                  highlight-current-row>
            <el-table-column
                    prop="name"
                    label="名称">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="标题">
            </el-table-column>
            <el-table-column
                    prop="subDomain"
                    label="二级域名">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="电话">
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="email">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态">
                <template scope="scope">
                    <div>
                        <el-tag v-if="scope.row.status == 'online'" type="primary">运营中</el-tag>
                        <el-tag v-else type="gray">已下线</el-tag>
                    </div>
                </template>
            </el-table-column>

            <el-table-column
                    label="操作">
                <template scope="scope">
                    <el-button v-if="scope.row.status == 'online'" @click="putOffline(scope.row._id)" type="text" >下线</el-button>
                    <el-button v-else @click="putOnline(scope.row._id)" type="text" >上线</el-button>
                    <router-link :to="'/setting/site/edit/'+scope.row._id">
                        <el-button type="text" >编辑</el-button>
                    </router-link>
                    <el-button @click="deleteInfo(scope.row._id)" type="text" >删除</el-button>
                </template>
            </el-table-column>

        </el-table>

    </div>
</template>

<script>
  import fetch from '@/utils/fetch';
  import {parseTime} from '@/utils';
  import industries from '@/data/industries.json';
  import ElButton from "../../../../node_modules/element-ui/packages/button/src/button";
  import { mapGetters } from 'vuex';

  export default {
    components: {ElButton},
    data() {
      return {
        list: null,
        listLoading: true,
      }
    },
    watch: {

    },
    created() {
      this.fetchData();
    },
    computed: {
        ...mapGetters([
          'site',
          'roles'
        ]),
    },
    methods: {
      fetchData(roles) {
        this.listLoading = true;
        fetch({
          url: roles == 'root'?'/sites':'/site/' + this.site,
          method: 'get'
        }).then(res => {
          console.log('res.data',res.data)
          if (roles == 'root') {
              this.list = res.data;
          } else {
              var listArr = [res.data]
              this.list = listArr;
          }

          this.listLoading = false;
        })


      },
      deleteInfo(id){
          this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
              type: 'warning'
          }).then(() => {
              fetch({
                  url: '/site/' + id,
                  method: 'DELETE'
              }).then(res => {
                  console.log('res', res)
                  if (res.data.ok === 1) {
                      this.$message({
                          type: 'success',
                          message: '删除成功!'
                      });
                      this.$delete(this.list, this.list.indexOf(this.list.find(item => {
                          return item._id === id;
                      })))
                  }
              });
          })
      },

      putOnline(id) {
          this.$confirm('此操作将上线该站点, 是否继续?', '提示', {
              type: 'warning'
          }).then(() => {
              fetch({
                  url: '/site/'+id+'/online',
                  method: 'put'
              }).then(res => {
                  console.log(res);
                  if (res.data.result.ok === 1) {
                      this.$message({
                          type: 'success',
                          message: '上线!'
                      });
                        var result = this.$set( this.list[this.list.indexOf(this.list.find(item => {
                            return item._id === id
                        }))], 'status', 'online');
                  }
              });
          })
      },
      putOffline(id) {
          this.$confirm('此操作将下线该站点, 是否继续?', '提示', {
              type: 'warning'
          }).then(() => {
              fetch({
                  url: '/site/'+id+'/offline',
                  method: 'put'
              }).then(res => {
                  if (res.data.result.ok === 1) {
                      this.$message({
                          type: 'success',
                          message: '下线!'
                      });
                      this.$set( this.list[this.list.indexOf(this.list.find(item => {
                          return item._id === id
                      }))], 'status', 'offline');
                  }
              });
          })
      }
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .checkbox-item{
        display: block;
        margin: 6px 20px 6px 10px;
    }
    .img{
        margin: 8px 0;
        width: 80px;
        height: 60px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        &[lazy=error],&[lazy=loading]{
            background-size: 50%;
        }
    }
    .time{
        word-break:break-all ;
    }
    .search-input{
        width: 300px;
    }

</style>
